<template>
  <div class="part" >
    <el-collapse v-model="activeNames" @change="handleChange" >
      <el-collapse-item :title="tab.header"   name="1">
        <ul class="dtlist">
          <li class="item" v-for="(item, i) in tab.list" :key="i">

            <el-link :href="item.url" target="_blank">{{ item.tittle }}</el-link>

            <!-- <a :href="item.url" target="_blank">{{ item.tittle }}</a
            >&nbsp; -->
            <el-link icon="el-icon-view"></el-link>{{ item.seecount }}
          </li>
          <li class="item" icon="el-icon-more" >
            <el-link href="https://element.eleme.io" target="_blank" icon="el-icon-more">更多</el-link>
          </li>
          <br/>
          <!-- <el-button class="right" icon="el-icon-more" size="mini" round>更多</el-button> -->
          <!-- <el-button size="mini" round>超小按钮</el-button> -->
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "part",
  props: {
    tab: Object,
  },
  data() {
    return {
      ntab: {
        header:'',
        list:{}
      },
      msg: "Welcome to Your Vue.js App",
      activeNames: ["1", "2"],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
  watch: {
    tab: {
      handler(newv, oldv) {
        console.log("new============");
        console.log(newv);
        console.log("old============");
        console.log(oldv);
        this.ntab = this.newv;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.part {
  width: 90%;
  margin: 1em auto;
  border-radius: 15em;
  /* background: rgba(0, 0, 0, 1); */
}
/* .el-collapse {
  border-radius: 15em;
} */

/* .el-collapse-item__header {
   padding-left: 1em; text-align: center !important; 
} */

.item {
  text-align: left;
  list-style: none;
}

.dtlist {
  width: 95%;
  margin-left: -2em;
}

a {
  /* text-decoration: none; */
  color: black;
}
</style>
